<template>
	<!-- 男女比例环形图 -->
	<charts :option="option" class="male-female-ratio"/>
</template>

<script>
import charts from '@/components/echarts/echarts';
import { getCityMaleFemaleRatio } from '@/api/command-center';

export default {
	name: 'male-female-ratio',
	components: {
		charts
	},
	data () {
		return {
			option: {}
		};
	},
	created () {
		getCityMaleFemaleRatio().then(res => {
			this.option = {
				title: {
					text: '「 市男女比例 」',
					textStyle: {
						color: '#52def1'
					},
					left: 'center',
					top: 10,
				},
				series: [
					{
						type: 'pie',
						radius: ['58%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '40',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						itemStyle: {
							// borderWidth:5, //设置border的宽度有多大
							// borderColor:'#010713',
						},
						data: res.data
					}
				]
			};
		});
	}
};
</script>

<style lang='less' type="text/less" scoped>
	.male-female-ratio {
		width: 100%;
		height: 100%
	}
</style>
